<template>
  <el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
      @tab-click="handleClick"
  >
    <el-tab-pane label="详情" name="detail">
      <router-view></router-view>
    </el-tab-pane>
    <el-tab-pane label="添加" name="insert">
      <router-view></router-view>
    </el-tab-pane>

  </el-tabs>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {useRouter,useRoute } from 'vue-router'
import type {TabsPaneContext} from 'element-plus'

const router = useRouter()
const activeName = ref('detail')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  let name = tab.props.name
  if (name === 'detail') {
    router.push({name: 'detail'})
  } else if (name === 'insert') {
    router.push({name: 'insert'})
  }
}

</script>
